<template>
  <!-- 安全验收计划 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search="handleSearch" />

    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="安全验收计划" /> -->
<!--        <div class="table-operateors mb20">-->
          <!--          <a-button  type="primary" icon="plus" @click="handleUpdate('add')" v-btnPermission="'hse_019_add_01'">新增计划-->
          <!--          </a-button>-->
<!--        </div>-->
        <!-- 统计 -->
        <!-- 安全验收计划总数：10 个 | 待提交审核：2 个 | 审核中：2 个 | 审核通过：2 个 | 审核不通过：2 个 -->
        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone" />
          <span style="margin-right: 12px"> 安全验收计划总数：
                    <span class="totalNum">{{ totalDetails.total }}</span> 个  |
                    待提交 <span class="totalNum">{{ totalDetails.draft }}</span> 个  |
                    已提交 <span class="totalNum">{{ totalDetails.submitted }}</span> 个
            <!-- |
           审核通过 <span class="totalNum">{{totalDetails.past}}</span> 个  |
           审核不通过 <span class="totalNum">{{totalDetails.rejected}}</span> 个 -->
                  </span>
        </div>
        <!-- 统计 -->
        <list-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :request="loadData"
          :isScrollX="false"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="sort" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="operator" slot-scope="text, record">
            <div class="pub-table-list-action">
              <template v-if="record.haveEdit">
                <span v-if="record.editNum === 0" @click="handleUpdate('edit', record)&&hideBuquBtn()"
                      v-btnPermission="'hse_019_edi_02'"
                >填报</span>
                <template v-else>
                  <span class="base-btn" @click="handleUpdate('look', record)" v-btnPermission="'hse_019_loo_04'"
                  >查看</span>
                  <span @click="handleUpdate('edit', record)" v-btnPermission="'hse_019_edi_02'">编辑</span>
                </template>
              </template>
              <span v-else class="base-btn" @click="handleUpdate('look', record)" v-btnPermission="'hse_019_loo_04'"
              >查看</span>
              <!--              <span-->
              <!--                v-if="record.auditStatus == 'DRAFT'"-->
              <!--                @click="handleUpdate('del', record)"-->
              <!--                v-btnPermission="'hse_019_del_03'"-->
              <!--              >删除</span>-->
            </div>
          </template>
          <template slot="auditStatus" slot-scope="text, record">
            <list-status :status="record.auditStatus" conversion="en" :text="text"></list-status>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import ThemeChoose from '@/components/themeChoose/themeChoose.vue'
import {
  deleteAcceptancePlan,
  getAcceptancePlanCount,
  getAcceptancePlanList
} from '@/api/safetySupervision/acceptancePlan'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import StatusDisplay from '@/components/StatusDisplay'
import dayjs from 'dayjs'

export default {
  name: 'a' + Date.now(), components: {
    ThemeChoose,
    STable,
    StatusDisplay
  },
  data() {
    return {
      searchOptions: [
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        // {
        //   name: '所属分公司',
        //   valueKey: 'branchComId',
        //   type: SelectSubCompany
        // },
        // {
        //   name: '所属项目',
        //   keyValue: 'branchComId',
        //   valueKey: 'projectId',
        //   type: SelectProject
        // },
        {
            name: '月份',
            value: 'planMonth',
            type: 'month',
        },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'sort',
         width:100,
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '计划月份',
          width:150,
          dataIndex: 'planMonth'
        },
        {
          title: '所属分公司',
          width:300,
          dataIndex: 'branchComName'
        },
        {
          title: '所属项目',
          width:300,
          dataIndex: 'projectName'
        },
        {
          title: ' 操作',
          dataIndex: 'operator',
          width: 180,
          fixed: 'right',
          scopedSlots: { customRender: 'operator' }
        }
      ],
      queryParam: {},
      totalDetails: {
        total: 0,
        draft: 0,
        submitted: 0,
        past: 0,
        rejected: 0
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        this.getAcceptancePlanCount(requestParameters)
        const [err, res] = await getAcceptancePlanList(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })
      }
    }
  },
  methods: {
    handleSearch(val = {}) {
      this.queryParam = {
        ...val,
        beginDate:
          (val.beginPlanMonth && val.beginPlanMonth.length && val.beginPlanMonth[0].format('YYYY-MM-DD')) ||
          void 0,
        endDate:
          (val.beginPlanMonth && val.beginPlanMonth.length && val.beginPlanMonth[1].format('YYYY-MM-DD')) ||
          void 0
      }
      delete this.queryParam.beginPlanMonth
      this.$refs.table.refresh(true)
    },
    // 统计
    async getAcceptancePlanCount(param) {
      const [err, res] = await getAcceptancePlanCount(param)
      if (!err) {
        this.totalDetails = res.data
      }
    },
    async deleteAcceptancePlan(data) {
      const [err, res] = await deleteAcceptancePlan({ id: data.id })
      if (!err) {
        this.$message.success('成功')
        this.$refs.table.refresh(true)
      }
    },
    // 处理更新操作（新增、编辑）
    async handleUpdate(type, data = {}) {
      if (type == 'del') {
        let that = this
        this.$confirm({
          title: '温馨提示',
          content: '确定是否删除数据？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            return that.deleteAcceptancePlan(data)
          }
        })
      } else {
        this.$router.push({
          name: 'UpdateAcceptancePlan',
          query: {
            id: data.id || '',
            pageType: type
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>
